<template>
    <div class="BookDetails">
        <!-- 顶部栏 -->
        <div class="Nav">
            <van-icon name="arrow-left" class="left" @click="back" />
        </div>
        <!-- 书籍详情 -->
        <div class="bookdetails">
            <!-- 上部分书籍详情 -->
            <div class="Topbookdetails" v-for="(item, index) in BookDetailsList">
                <!-- 书籍图片 -->
                <div class="img-box">
                    <img class="img-auto" :src="item.Img" />
                </div>
                <!-- 标题,类型,点击量等 -->
                <div class="rigcontent">
                    <p class="title">{{ item.title }}</p>
                    <div class="type-author">
                        <span class="type">{{ item.category }}</span> | <span class="author">{{ item.name }}</span>
                    </div>
                    <div style="margin: 10px 0 5px 0">
                        <van-rate v-model="rateValue" allow-half readonly size="15" color="#ffd21e" void-icon="star" void-color="#eee" style="margin-bottom: 5px" />
                    </div>
                    <div class="words-clickCount">
                        <div class="words">{{ item.words }}万字</div>
                        <div class="clickCount">{{ item.clicksCount }}点击</div>
                    </div>
                    <div class="wprice">{{ item.wprice }}阅点/千字</div>
                </div>
                <!-- 书籍简介 -->
                <div class="desc">{{ item.summary }}</div>
                <div class="authorizer-paydesc">
                    <div class="authorizer">
                        <span>授权方:</span><span class="company">{{ item.authorizer }}</span>
                    </div>
                    <div class="paydesc"><span>作品类型:</span>{{ item.paydesc }}</div>
                </div>
            </div>
            <!-- 分割线 -->
            <van-divider :style="{ borderColor: 'gray' }" />
            <!-- 章节 -->
            <van-cell is-link style="padding-left: 0; padding-right: 0" @click="goCatalogue(BookId)">
                <div style="display: flex; justify-content: space-between">
                    <div style="position: relative; width: 200px">
                        <span>
                            <!-- <i style="font-size: 24px" class="iconfont icon-mulu"></i>
                             -->
                            <van-icon name="bars" />
                        </span>
                        <span style="position: absolute; left: 29px; top: 0"> 共{{ ChaptersNumber }}章 </span>
                    </div>
                </div>
            </van-cell>
            <!-- 断层 -->
            <div class="fault"></div>
            <!-- 评论 -->
            <div class="Comment-box" @click="clickComment">
                <!-- 标题and写评论 -->
                <div class="text-write">
                    <div class="line"></div>
                    <div class="text">评论</div>
                    <div class="write-box">
                        <van-icon name="edit" />
                        <span>写评论</span>
                    </div>
                </div>
                <!-- 评论内容 -->
                <div class="Comment-Content">
                    <div class="Comment-item" v-for="(item, index) in PartComment" v-if="PartComment !== null">
                        <!-- 上部分 -->
                        <div class="Upper-part">
                            <!-- 头像 -->
                            <div class="img-box">
                                <img src="../assets/images/comment-user.png" class="img-auto" />
                            </div>
                            <!-- 用户昵称,等级,星数,时间 -->
                            <div class="user">
                                <div class="NickName-Estate">
                                    <div class="NickName">{{ item.nickName }}</div>
                                    <span :class="['level', 'iconfont', 'icon-level' + item.userLevel]"></span>
                                </div>
                                <!-- 星数 时间 -->
                                <div class="Star-time">
                                    <div class="Star">
                                        <van-rate v-model="item.grade" readonly size="15" color="#ffd21e" void-icon="star" void-color="#eee" style="margin-bottom: 5px" />
                                    </div>

                                    <div class="time">{{ getDateTime(item.time) }}</div>
                                </div>
                            </div>
                            <!-- 点赞 -->
                            <p class="likes">
                                <span class="likes_num">{{ item.likes }}</span>
                                <span class="iconfont icon-dianzan"> </span>
                            </p>
                        </div>
                        <!-- 下部分 -->
                        <div class="Next-part">
                            {{ item.comment }}
                        </div>
                    </div>
                </div>
                <!-- 查看全部评论 -->
                <div class="AllComment" @click="goAllComment">查看全部评论</div>
            </div>
        </div>
        <!-- 底部栏 -->
        <div class="foot">
            <div class="added" @click="add" v-if="addFlag">已在书架</div>
            <div class="addBookShelf" @click="add" v-else>加入书架</div>

            <div class="buy" @click="buy">购买</div>
            <div class="read" @click="GoBookContent(BookId)">开始阅读</div>
        </div>
    </div>
</template>

<script>
import { Toast } from "vant";

export default {
    name: "BookDetails",
    data() {
        return {
            // 书籍id
            BookId: null,
            // 书籍标题
            title: null,
            // 需要的数据
            bookdetails: {},
            BookDetailsList: [],
            timer: null,
            // 书架数据列表
            // bookshelfDataList: [],
            // 书架数据
            bookshelfData: null,
            // 是否加入书架标识符
            addFlag: false,
            // 评分星数
            rateValue: 3,
            // 评论列表
            AllCommentList: null,
            // 五条评论
            PartComment: null,
            // 章节数
            ChaptersNumber: 0,
        };
    },
    created() {
        // 接收书籍id以及标题
        this.BookId = this.$route.query.BookId;
        this.title = this.$route.query.title;
        clearTimeout(this.timer);
        this.getBookDetails();
        this.getCommentList();
        // setTimeout(() => {
        //     this.bookdetails;
        // }, 2000);
        // 获取登录标识符
        if (JSON.parse(localStorage.getItem("isLogined"))) {
            this.isLogined = JSON.parse(localStorage.getItem("isLogined"));
        }

        setTimeout(() => {
            // 书籍是否已加入
            this.getAddFlag();
            // this.getBookDetails();
        }, 100);
    },
    methods: {
        clickComment() {
            if (!this.isLogined) {
                this.$router.push({
                    name: "Login",
                });
            } else {
                Toast("功能正在完善");
            }
        },
        back() {
            this.$router.back();
        },
        // 时间戳转换为yyyy年mm月dd日 hh时mm分
        getDateTime(value) {
            // 时间戳转换为当前地区的标准时间
            let time = new Date(value);
            // 自带的etFullYear方法可以将标准时间返回一个表示年份的 4 位数字
            let year = time.getFullYear();
            //getMonth()方法可将标准时间返回表示月份的数字。返回值是0(一月)到11(十二月)之间的一个整数。
            let month = time.getMonth() + 1;
            //getDate()可返回标准时间的月份的某一天
            let date = time.getDate();
            // .getHours()可返回标准时间的小时字段。
            let hour = time.getHours();
            //
            let minute = time.getMinutes();
            // let second = time.getSeconds();
            // 获取当前标准时间 判断获得的时间是否小于当前年份
            let currentTime = new Date();
            let currentYear = currentTime.getFullYear();
            month = month < 10 ? "0" + month : month;
            date = date < 10 ? "0" + date : date;
            hour = hour < 10 ? "0" + hour : hour;
            minute = minute < 10 ? "0" + minute : minute;
            if (year < currentYear) {
                let str = String(year) + "年" + String(month) + "月" + String(date) + "日" + " " + String(hour) + ":" + String(minute);

                return str;
            } else {
                let str = String(month) + "月" + String(date) + "日" + " " + String(hour) + ":" + String(minute);
                return str;
            }
        },
        // 获取书籍信息
        getBookDetails() {
            this.axios({
                method: "get",
                url: "book/getsub.json",
                params: {
                    id: this.BookId,
                    title: this.title,
                },
            })
                .then((res) => {
                    //
                    if (res.data.feed !== undefined) {
                        //
                        // 获取需要的数据
                        this.bookdetails.Img = res.data.feed.entry.link[1].href;
                        this.bookdetails.title = res.data.feed.entry.title;
                        // this.bookdetails.category = res.data.feed.entry.pris;
                        this.bookdetails.name = res.data.feed.entry.author.name;
                        this.bookdetails.summary = res.data.feed.entry.summary;
                        this.bookdetails.category = res.data.feed.entry["pris:book"].category;
                        this.bookdetails.words = res.data.feed.entry["pris:book"].words;
                        this.bookdetails.words = Number((this.bookdetails.words / 10000).toFixed(1));
                        this.bookdetails.clicksCount = res.data.feed.entry["pris:subscribe"].clicksCount;
                        this.bookdetails.wprice = res.data.feed.entry["pris:book"].wprice;
                        this.bookdetails.authorizer = res.data.feed.entry["pris:book"].authorizer;
                        this.bookdetails.paydesc = res.data.feed.entry["pris:book"].paydesc;
                        // 章节数量
                        this.ChaptersNumber = res.data.feed.entry["pris:book"].totalArticleCount[0];
                        // 书籍星数
                        this.rateValue = Number(res.data.feed.entry["pris:ranking"].value);
                        this.BookDetailsList.push(this.bookdetails);
                        // 书架需要的数据
                        // this.bookshelfDataList.push({
                        //     title: res.data.feed.entry.title,
                        //     cover: res.data.feed.entry.link[1].href,
                        //     BookId: this.BookId,
                        // });
                        this.bookshelfData = {
                            title: res.data.feed.entry.title,
                            cover: res.data.feed.entry.link[1].href,
                            BookId: this.BookId,
                        };
                    }
                })
                .catch((err) => {});
        },
        // 获取评论
        getCommentList() {
            this.axios({
                method: "get",
                url: "comment/getComments.json",
                params: {
                    bookId: this.BookId,
                },
            })
                .then((res) => {
                    this.AllCommentList = res.data.all.list;
                    // 先展示5条
                    this.PartComment = this.AllCommentList.slice(0, 5);
                    // // 处理时间
                    // this.AllCommentList.forEach(item=>{

                    // })
                })
                .catch((err) => {});
        },
        // 跳转书本内容页
        GoBookContent(BookId) {
            this.$router.push({
                name: "BookContent",
                query: {
                    BookId,
                },
            });
        },
        // 跳转全部评论
        goAllComment() {
            this.$router.push({
                name: "Allcomment",
                query: {
                    AllCommentList: JSON.stringify(this.AllCommentList),
                },
            });
        },
        // 跳转目录
        goCatalogue(BookId) {
            this.$router.push({
                name: "Catalogue",
                query: {
                    BookId,
                },
            });
        },
        // 添加书架
        add() {
            // 获取购物车的缓存数组(没有数据,则赋予一个空数组)
            let bookrackList = JSON.parse(localStorage.getItem("bookrackList")) || [];

            // 购物车有数据
            if (bookrackList.length > 0) {
                // 遍历书架数组
                for (let i = 0; i < bookrackList.length; i++) {
                    // 判断数组内书籍的id是否与当前需要加入的书籍id相同;
                    if (bookrackList[i].BookId == this.bookshelfData.BookId) {
                        // 相同就return
                        return;
                        //
                    }
                }
                // 不同就把当前项push进去
                bookrackList.push(this.bookshelfData);
                Toast.success("加入成功");
                this.addFlag = true;

                //
            } else {
                // 购物车没有数据 把当前书籍push进去

                bookrackList.push(this.bookshelfData);
                Toast.success("加入成功");
                this.addFlag = true;
            }

            // 存入本地
            localStorage.setItem("bookrackList", JSON.stringify(bookrackList));
        },

        // 判断当前书籍是否存在于书架列表中 存在则已加入表示为true
        getAddFlag() {
            // 获取书架列表
            let bookrackList = JSON.parse(localStorage.getItem("bookrackList")) || [];
            // 书架有书
            if (bookrackList.length > 0) {
                // 遍历书架 判断当前书籍id是否与书架中书id相同 相同即为已加入 为true

                for (let i = 0; i < bookrackList.length; i++) {
                    if (bookrackList[i].BookId == this.BookId) {
                        //
                        this.addFlag = true;
                        //
                        //
                    }
                }
                //
            } else {
                // 没有书籍已加入
                this.addFlag = false;
                //
            }
        },

        buy() {
            Toast("暂不支持此功能");
        },
    },
};
</script>

<style lang="less" scoped>
.BookDetails {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;

    .foot {
        width: 100%;
        height: 50px;
        position: fixed;
        bottom: 0;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
        border-top: 1px solid #d2d7d7;
        display: flex;
        .added {
            width: 33.333%;
            height: 100%;
            text-align: center;
            line-height: 50px;
            font-size: 16px;
            font-weight: 550;
            color: #babdbd;
        }
        .addBookShelf,
        .buy,
        .read {
            width: 33.333%;
            height: 100%;
            text-align: center;
            line-height: 50px;
            font-size: 16px;
            color: #444;
            font-weight: 550;
        }
        .buy {
            border-left: 1px solid #d2d7d7;
            border-right: 1px solid #d2d7d7;
        }
        .read {
            background-color: #e4393c;
            color: white;
        }
    }
    .Nav {
        height: 50px;
        border-bottom: 1px solid #e3e5e5;
        display: flex;
        align-items: center;
        margin-top: -8px;
        .left {
            font-size: 20px;
            margin: 0 0 0 10px;
        }
    }
    .bookdetails {
        width: 350px;
        height: calc(100% - 100px);
        margin: 0 auto;
        overflow-y: auto;
        &::-webkit-scrollbar {
            display: none;
        }
        .fault {
            width: 100%;
            height: 10px;
            background-color: #f6efef;
        }
        .van-divider {
            margin-top: 100px;
            margin-bottom: 0;
        }
        .van-icon-bars {
            font-size: 18px;
            margin-top: 2px;
        }
        .Comment-box {
            margin: 0 auto;
            margin-top: 30px;

            .AllComment {
                width: 120px;
                height: 30px;
                border: 0.05333rem solid #686969;
                margin: 25px auto;
                text-align: center;
                line-height: 30px;
                color: #686969;
                font-size: 16px;
            }
            .Comment-Content {
                margin: 0 auto;
                overflow-y: auto;

                .Comment-item {
                    margin: 0 0 25px 0;
                    .Next-part {
                        padding: 0 49px;
                        margin-top: 5px;
                        font-size: 14px;
                    }
                    .Upper-part {
                        width: 100%;
                        display: flex;
                        .img-box {
                            width: 35px;
                            height: 35px;
                            border-radius: 50%;
                        }
                        .likes {
                            margin: 6px 0 0 20px;
                            .likes_num {
                                font-size: 14px;
                                margin-right: 5px;
                                color: #9d9e9a;
                            }
                        }
                        .user {
                            margin: 0 0 0 15px;
                            .NickName-Estate {
                                display: flex;
                                align-items: center;
                                .NickName {
                                    color: #8585ee;
                                    font-size: 14px;
                                }
                                .level {
                                    color: #f3574e;
                                    font-size: 20px;
                                    margin-left: 5px;
                                }
                            }
                            .Star-time {
                                width: 250px;
                                display: flex;
                                margin: 5px 0 0 0;

                                .time {
                                    margin: -2px 0 0 10px;
                                    color: gray;
                                    font-size: 14px;
                                }
                            }
                        }
                    }
                }
            }
            .text-write {
                display: flex;
                margin-bottom: 30px;
                .line {
                    width: 3px;
                    height: 12px;
                    background-color: gray;
                    margin: 6px 5px 0 0;
                }
                .text {
                    font-size: 16px;
                    margin: 0 250px 0 0;
                    color: grey;
                }
                .write-box {
                    font-size: 14px;
                    border: 1px solid grey;
                    border-radius: 3px;
                }
            }
        }

        .Topbookdetails {
            width: 100%;
            height: 30%;
            display: flex;
            margin-top: 10px;
            flex-wrap: wrap;

            .rigcontent {
                width: 67%;
                margin-left: 10px;
                .words-clickCount {
                    display: flex;
                    color: gray;
                    .words {
                        margin: 0 20px 0 0;
                    }
                }

                .wprice {
                    color: gray;
                    margin: 15px 0 0 0;
                }

                .title {
                    font-size: 20px;

                    margin: -4px 0 10px 0;
                }
                .type-author {
                    .type {
                        color: gray;
                    }
                    .author {
                        color: #8585ee;
                    }
                }
            }
            .desc {
                margin: 15px 0 0 0;
                // 给容器元素类型转换为
                display: -webkit-box;
                // 设置弹性盒子垂直排列
                -webkit-box-orient: vertical;
                // 控制要显示的行数
                -webkit-line-clamp: 3;
                // 溢出隐藏
                overflow: hidden;
                font-size: 14px;
            }
            .authorizer-paydesc {
                margin: 10px 0 0 0;
                color: gray;
                font-size: 14px;
                .company {
                    color: #8585ee;
                }
            }
            .img-box {
                width: 30%;
            }
        }
    }
}
</style>
